<template>
  <section>
    <el-form label-width="80px" inline style="border: 0px solid red">
      <el-form-item label="" style="border: 0px solid red;">
        <el-row style="display: flex;flex-direction: row;width: 100%">
          <filter-tool class="filtertool" type="companyId" test="companyName" v-on:confirm="filterEvent"></filter-tool>
          <filter-tool class="filtertool" type="categoryId" test="name" v-on:confirm="filterEvent"></filter-tool>
        </el-row>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;">
        <search-tool v-on:search="searchProductEvent"></search-tool>
      </el-form-item>
      <el-form-item label="" style="border: 0px solid red;float: right">
        <!--<el-button size="mini" @click="addOutboundBtn" type="primary" icon="el-icon-plus"/>-->
      </el-form-item>
    </el-form>
    <el-table :data="inventory" @selection-change="selProductSkusEvent" v-loading="loading">
      <el-table-column type="expand" label="详情">
        <template slot-scope="props">
          <el-form label-width="90px" size="mini" inline>
            <el-form-item label="类型：" style="width: 45%">
              <el-cascader v-if="productCategoryList" size="mini" :options="productCategoryList" change-on-select
                           :props="defaultProps" v-model="props.row.product.categoryList" :show-all-levels="false" :disabled="true"/>
            </el-form-item>
            <el-form-item label="属性：" style="width: 45%">
              {{props.row.product.properties}}
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column type="selection" width="55"/>
      <el-table-column type="index" label="序号"/>
      <el-table-column label="标题" prop="product.name"></el-table-column>
      <el-table-column label="属性" prop="props"></el-table-column>
      <el-table-column label="单位" prop="unit"></el-table-column>
      <el-table-column label="sn" prop="sn"></el-table-column>
      <el-table-column label="实际库存" prop="realityStock"></el-table-column>
      <el-table-column label="虚拟库存" prop="virtualStock"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">

        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-show="totalPage>0" small layout="prev, pager, next" :page-count="totalPage" @current-change="goPage"/>
    <div>
      <batch-tool :titleList="titleList" v-on:operateEvent="operateEvent"></batch-tool>
    </div>
    <div class="progressBox" v-if="listLength >0">
      <!--<el-progress class="progress" type="circle" :percentage='30'>操作者</el-progress>-->
      <el-progress class="progress" type="circle" :percentage="(listLength-selProductSkus.length)/listLength *100"/>
      <el-row>操作中……</el-row>
    </div>
    <el-dialog title="生成入库单" :visible.sync="inboundDialog" width="80%" :before-close="beforeEvent">
      <inbound :itemlist="itemList" :companyId="filterObj.companyId" v-on:success="getInventory(0,filterObj)"></inbound>
    </el-dialog>
    <el-dialog title="生成出库单" :visible.sync="outboundDialog" width="80%" :before-close="beforeEvent">
      <outbound :itemlist="itemList" :companyId="filterObj.companyId" v-on:success="getInventory(0,filterObj)"></outbound>
    </el-dialog>
  </section>
</template>

<script>
  import outbound from './outbound/newOutbound'
  import inbound from './inbound/newInbound'
  import batchTool from '@/common/batchTool'
  import searchTool from '@/common/searchTool'
  import filterTool from '@/common/filterTool'
  import {mapGetters, mapActions, mapMutations} from 'vuex'
  import Vue from 'vue'//后续添加属性，需要vue联动
  import errHandler from '@/assets/errHandler'
  export default {
    name: "inventory",
    components:{filterTool,searchTool,batchTool,inbound,outbound},
    props:['currWarehouse'],
    data(){
      return{
        productList:null,
        inventory:null,
        totalPage:0,
        filterObj:{},
        defaultProps: {
          value:'id',
          children: 'childrens',
          label: 'name'
        },
        productCategoryList:null,
        loading:false,
        selProductSkus:null,
        titleList:['生成入库单','生成出库单'],
        listLength:0,
        inboundDialog:false,
        outboundDialog:false,
        itemList:null
      }
    },
    created(){
      console.log('inventory-----------',this.currWarehouse)
      if(this.currWarehouse.id){
        this.getProductCategoryList()//加载产品类型列表
        // this.getInventory()
      }
    },
    computed:{
      ...mapGetters(['department']),
    },
    watch: {
    },
    methods: {
      ...mapActions({
        fetch: 'fetch'
      }),
      beforeEvent(e){
        console.log('关闭前还有e------',e)
        this.getInventory(0,this.filterObj)
      },
      getProductCategoryList(){
        this.fetch({name:"getProductCategoryList"})
          .then(res=>{
            console.log('产品类型---------',res)
            this.productCategoryList=res
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      goPage(val){
        this.getInventory(val-1,this.filterObj)
      },
      getInventory(pageNo,filterObj){
        console.log('筛选参数----------',filterObj)
        this.inboundDialog=false
        this.outboundDialog=false
        if(filterObj.companyId === undefined){
          this.$message({type:'error',message:'请先选择公司'})
          this.inventory=[]
          return
        }
        this.loading=true
        this.fetch({name:"getProductList",data:{page:pageNo?pageNo:0,...filterObj}})
          .then(res=>{
            this.productList=res.content
            this.totalPage=res.totalPages
            console.log('库存列表---------',res)
            if(res.content.length <=0){
              this.$message({type:'error',message:'当前条件无产品，请重新筛选！'})
              this.loading=false
              return
            }
            let skus=[]
            res.content.forEach(r=>{
              r.productSpecs.forEach(p=>{
                Vue.set(p,'product',{
                  name:r.name,id:r.id,categoryList:r.data.categoryList,properties:r.properties
                })
                skus.push(p)
              })
            })
            console.log('skus的集合--------',skus)
            this.inventory=[]
            this.getStockOne(skus)
          })
          .catch(err=>{
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      getStockOne(array){
        console.log('array是啥--------',array)
        this.fetch({name:"getStockOne",data:{sn:array[0].sn,ownerId:this.filterObj.companyId}})
          .then(res=>{
            console.log('获得库存了么-----------',res)
            Vue.set(array[0],'realityStock',res.realityStock)
            Vue.set(array[0],'virtualStock',res.virtualStock)
            Vue.set(array[0],'unit',res.unit)
            this.cyclicEvent(array)
          })
          .catch(err=>{
            if(err.errCode ==='stock_not_exist'){
              Vue.set(array[0],'realityStock','尚未入库')
              Vue.set(array[0],'virtualStock','尚未入库')
              Vue.set(array[0],'unit','无')
              this.cyclicEvent(array)
              return
            }
            console.log(err)
            errHandler.handle(this,err)
          })
      },
      cyclicEvent(array){
        this.inventory.push(array[0])
        array.splice(0,1)
        if(array.length>0){
          this.getStockOne(array)
        }else {
          console.log('一个产品的skus轮完了。。。',this.inventory)
          this.loading=false
        }
      },
      selProductSkusEvent(e){
        console.log('多选产品sku事件----',e)
        this.selProductSkus=e
        e.forEach(g=>{
          // this.selProductSkus.push({id:g.id,specs:g.productSpecs,name:g.name})
        })
      },
      filterEvent(e,objK){
        console.log('筛选条事件---------',e,objK)
        for(let key in e){
          if(objK === undefined) this.filterObj[key]=e[key]
          else this.filterObj[objK]=e[key]
        }
        console.log('看下filterObj----------',this.filterObj)
        let tmp={}
        for(let k in this.filterObj){
          if(this.filterObj[k] !== undefined){
            tmp[k]=this.filterObj[k]
          }
        }
        console.log('看下tmp----------',tmp)
        this.getInventory(0,tmp)//筛选出库单列表
      },
      searchProductEvent(e){
        this.filterObj.key=e
        this.getInventory(0,this.filterObj)
      },
      operateEvent(e){
        if(this.selProductSkus === null ||this.selProductSkus.length <=0){
          this.$message({type:'error',message:'请至少选择一个产品sku！'})
          return
        }
        console.log('看一下筛选数据----------',this.filterObj)
        //批量操作中。。。
        // this.listLength=this.selProductSkus.length
        if(e === 0){//入库单
          this.itemList=[{specs:this.selProductSkus}]
          this.inboundDialog=true
        }else if(e === 1){//出库单
          //要判断是否有库存
          this.judgeStock(this.selProductSkus)
        }
      },
      judgeStock(array){
        console.log('判断库存',array)
        let tmp=[]
        array.forEach(a=>{
          if(a.virtualStock >0){
            tmp.push(a)
          }
        })
        if(tmp.length <=0){
          this.$message({type:'error',message:'暂无可出库的库存，请确认！'})
          return
        }
        this.itemList=[{specs:tmp}]
        this.outboundDialog=true
      },
      dialogSuccessEvent(){
        this.getInventory(0,this.filterObj)
      }
    }
  }
</script>

<style scoped>
  .filtertool{
    margin: 0 5px;
    width: 110px;
    border:0px solid red;
  }
  .progressBox{
    width: 100%;
    height: 100%;
    position: fixed;
    top:0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*justify-items: center;*/
    justify-content: center;
    z-index: 100;
    background-color: rgba(255,255,255,0.6);
  }
  .progress{
    position:relative;
    z-index: 1001;
    text-align: center;
  }
</style>
